<template>
  <div>
    <a-form ref="formRef" :model="formState" :rules="planRules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="多账号分配" name="distribute_mode">
        <ButtonGroup
          :modelValue="formState.distribute_mode"
          @update:modelValue="distributeModeChange"
          :values="[1, 2, 3, 4]"
          :isMutex="true"
          :labels="['多账号一致', '不同定向包', '不同标题包', '不同素材组']"
        />
      </a-form-item>
      <a-form-item label="创建方式" name="add_mode">
        <a-radio-group v-model:value="formState.add_mode">
          <a-radio-button :value="1">新建计划</a-radio-button>
          <a-radio-button :value="2" :disabled="isExistingPlanDisabled">已有计划</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <!-- 只在新建计划时显示以下字段 -->
      <template v-if="formState.add_mode === 1">
        <a-form-item label="投放范围" name="campaignType">
          <a-radio-group v-model:value="formState.campaignType">
            <a-radio-button value="1">商店</a-radio-button>
            <a-radio-button value="2">非商店</a-radio-button>
            <a-radio-button value="3">米盟</a-radio-button>
          </a-radio-group>
          <a-form-item-rest>
            <a-checkbox v-model:checked="formState.trafficMode" style="margin-left: 10px"> 开启流量优选 </a-checkbox>
          </a-form-item-rest>
        </a-form-item>
        <a-form-item v-if="formState.campaignType === '2' || formState.campaignType === '3'" label="投放方式" name="deliveryPolicy">
          <a-radio-group v-model:value="formState.deliveryPolicy">
            <a-radio-button :value="1">匀速投放</a-radio-button>
            <a-radio-button :value="0">加速投放</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="计划名称" name="name">
          <CampaignName v-model:name="formState.name" v-model:auto_suffix_id="formState.auto_suffix_id" :maxLength="10" />
        </a-form-item>
        <a-form-item label="预算" name="budget">
          <a-input-number
            v-model:value="formState.budget"
            :min="200"
            :max="100000000"
            :precision="0"
            addon-after="元/天"
            style="width: 150px"
          />
        </a-form-item>
        <a-form-item label="自动优化" name="autoOptimize">
          <a-radio-group v-model:value="formState.autoOptimize">
            <a-radio-button :value="true">开启</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="投放场景" name="scenario">
          <a-radio-group v-model:value="formState.scenario">
            <a-radio-button :value="0">日常投放</a-radio-button>
            <a-radio-button :value="1">增量投放</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="投放时间" name="startDate">
          <CommissioningDate v-model:startDate="formState.startDate" v-model:endDate="formState.endDate" />
        </a-form-item>
        <a-form-item label="转化追踪" name="conversionTracking">
          <a-button type="primary" @click="openSelectConversionModal"> 选择转化追踪 </a-button>
          <div v-if="!_.isEmpty(store.Plan.conversionsMap)">
            已设置 {{ Object.keys(store.Plan.conversionsMap).length }} 个账户的转化追踪
          </div>
        </a-form-item>
        <a-form-item label="出价方式" name="bid_mode">
          <a-radio-group v-model:value="formState.bid_mode">
            <a-radio-button :value="1">统一设置</a-radio-button>
            <a-radio-button :value="2">多账户分别设置</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="formState.bid_mode === 1" label="转化出价" name="converBidMap">
          <CampaignBid
            v-model="formState.converBidMap"
            :minBid="3"
            :maxBid="100"
            :precision="0"
            :showRandomBid="false"
            :showGradientBid="false"
          />
        </a-form-item>
        <a-form-item v-else label="转化出价" name="converBidMap">
          <div class="multi-account-bid-container">
            <a-button type="primary" @click="openSetConverBidModal"> 设置多账户出价 </a-button>
            <div>已设置 {{ Object.keys(store.Plan.converBidMap || {}).length }} 个账户的出价</div>
          </div>
        </a-form-item>
      </template>
    </a-form>
    <SelectConversionModal ref="selectConversionModalRef" />
    <SetConverBidModal ref="setConverBidModalRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed, onMounted } from "vue";
import ButtonGroup from "@/components/ButtonGroup.vue";
import { planFormState, planRules } from "@/pages/NewBatchCreateAd/adx/xiaomi/enum";
import CampaignName from "@/pages/NewBatchCreateAd/components/common/CampaignName.vue";
import CommissioningDate from "@/pages/NewBatchCreateAd/components/common/CommissioningDate.vue";
import CampaignBid from "@/pages/NewBatchCreateAd/components/common/CampaignBid.vue";
import SelectConversionModal from "./SelectConversionModal.vue";
import SetConverBidModal from "./SetConverBidModal.vue";
import { batchCreateAdStore } from "@/pages/NewBatchCreateAd/store/batchCreateAdStore";
import _ from "lodash";
const store = batchCreateAdStore();

const formRef = ref();
const formState = ref(planFormState);

const distributeModeChange = (val: number[]) => {
  formState.value.distribute_mode = val;
};

// 计算属性：判断是否禁用已有计划选项
const isExistingPlanDisabled = computed(() => {
  // 当多账号分配包含"不同定向包"(值为2)时，禁用已有计划选项
  return formState.value.distribute_mode.includes(2);
});

// 当多账户分配改变时，如果包含不同定向包，让创建方式等于新建计划
watch(
  () => formState.value.distribute_mode,
  (newVal) => {
    if (newVal.includes(2)) {
      formState.value.add_mode = 1;
    }
  }
);

// 选择转化追踪相关代码
const selectConversionModalRef = ref();
const openSelectConversionModal = () => {
  selectConversionModalRef.value.show();
};

// 转化出价相关代码
const setConverBidModalRef = ref();
const openSetConverBidModal = () => {
  setConverBidModalRef.value.show();
};
// 校验表单方法
const validate = async () => {
  try {
    // 验证基础表单
    await formRef.value.validate();
    return true;
  } catch (err) {
    return false;
  }
};

// 导出给父组件使用的方法
const getData = () => {
  return formState.value;
};

defineExpose({
  getData,
  validate,
});
</script>

<style scoped lang="less"></style>
